<template>
  <BasicDrawer
    :destroyOnClose="true"
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    :title="state.title"
    width="980px"
    @ok="onRepayment"
    okText="还款"
    :maskClosable="false"
  >
    <template #footer>
      <div v-if="record.debtAmount == 0"><a-botton></a-botton></div>
      <div v-else>
        <a-button @click="closeDrawer">取消</a-button>&nbsp;
        <a-button type="primary" @click="onRepayment">还款</a-button>
      </div>
    </template>

    <div class="card">

      <div class="c-title"> 基础信息</div>

      <div class="c-body">
        <a-row :gutter="[12, 12]">
          <a-col :span="3" class="label"> 客户信息</a-col>
          <a-col :span="9" class="value"> {{ record.realName }}&nbsp;{{ record.mobile }} </a-col>

          <a-col :span="3" class="label"> 累计欠款金额</a-col>
          <a-col :span="9" class="d-regular value">
            {{ record.debtAmountSum }}
          </a-col>

          <a-col :span="3" class="label"> 累计还款金额</a-col>
          <a-col :span="9" class="d-regular value">
            {{ record.repaymentAmountSum }}
          </a-col>

          <a-col :span="3" class="label"> 剩余欠款金额</a-col>
          <a-col :span="9" class="d-regular value">
            {{ record.debtAmount }}
          </a-col>
        </a-row>
      </div>

      <div class="c-title" style="margin: 32px 0 6px 0"> 变更日志</div>
      <BasicTable @register="registerTable" :resizeHeightOffset="44">
        <template #amount="{ record }">
          <span
            :style="
              record.type === '欠款'
                ? `font-size:14px;color:#333;`
                : `font-size:14px;color:#31B89A;`
            "
          >
            {{ record.type === '欠款' ? '+' : '-' }}{{ record.amount }}
          </span>
        </template>

        <template #masterOrderSn="{ record }">
          <div>
            <span @click="jumpTrackingNumber(record)" v-if="record.masterOrderSn" style="cursor: pointer; color: #f1a3b8;">{{ record.masterOrderSn }}</span>
            <span v-else style="color: #f1a3b8;">--</span>
          </div>
        </template>

        <template #signName="{ record }">
          <div @click="onSegno(record)" v-if="!record.signName && record.typeCode === 1" style="color: #f1a3b8; cursor: pointer;">签名</div>
          <img v-else :src="record.signName" alt="" style="width: 160px; object-fit: contain" />
        </template>
      </BasicTable>
    </div>
  </BasicDrawer>

  <RepaymentDialog @register="registerRepayment" @complete="onSearch" />
  <OrderSignature @register="registerSignature" @complete="reload" />
  <OrderDetail @register="registerDetail" />
</template>

<script setup>
  import { defineOptions, reactive, ref, inject } from 'vue';

  import { BasicDrawer, useDrawerInner, useDrawer } from '@/components/Drawer';

  import { useRouter } from 'vue-router';

  import { PAGE } from '@/api/http';
  import { useMessage } from '@/hooks/web/useMessage';
  import { BasicTable, useTable, TableAction } from '@/components/Table';

  import { useModal } from '@/components/Modal';
  import RepaymentDialog from './repayment-dialog.vue';
  import OrderSignature from '../cashier/order-signature.vue';
  import OrderDetail from '../cashier/order-detail.vue';

  const [registerSignature, { openDrawer: signatureDrawer }] = useDrawer();
  const [registerDetail, { openDrawer: detailDrawer }] = useDrawer();

  defineOptions({ name: 'DebtLogDetail' });

  const router = useRouter();
  const emit = defineEmits(['complete']);
  const state = reactive({ title: '' });
  const record = ref({});

  const { onSearch } = inject('onSearch');

  const [registerRepayment, { openModal: repaymentModal }] = useModal();

  const { createMessage } = useMessage();

  const [registerTable, { reload }] = useTable({
    api: PAGE('/membership/debtsRepaymentDetailList'),
    beforeFetch: (arg) => Object.assign(arg, { memberCode: record.value.memberCode ?? '-1' }),
    columns: [
      {
        title: '变更类型',
        dataIndex: 'type',
        ellipsis: false,
        width: 100,
      },

      {
        title: '金额',
        dataIndex: 'amount',
        ellipsis: false,
        slots: { customRender: 'amount' },
      },

      {
        title: '关联单号',
        dataIndex: 'masterOrderSn',
        ellipsis: false,
        slots: { customRender: 'masterOrderSn' },
      },

      {
        title: '操作人',
        dataIndex: 'createByName',
        ellipsis: false,
      },

      {
        title: '操作时间',
        dataIndex: 'createTime',
        ellipsis: false,
      },

      {
        title: '客户签字',
        dataIndex: 'signName',
        ellipsis: false,
        width: 180,
        slots: { customRender: 'signName' },
      },
    ],
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
  });

  const [registerDrawer, { closeDrawer }] = useDrawerInner(({ record: item }) => {
    state.title = '欠款详情';
    record.value = item ?? {};

    reload();
  });
  function jumpTrackingNumber(item) {
    detailDrawer(true, { masterOrderSn: item.masterOrderSn, memberCode: item.memberCode });
  }

  function onRepayment() {
    const { memberCode, debtAmount } = record.value;
    repaymentModal(true, { memberCode, debtAmount, record: record.value });
    closeDrawer();
    onSearch();
  }

  function onSegno(item) {
    signatureDrawer(true, { orderHeader: item });
  }
</script>

<style lang="less" scoped>
  .card {
    margin: 8px 0 46px;
    padding: 12px;

    .c-title {
      display: flex;
      flex-direction: row;
      align-items: center;
      column-gap: 8px;
      color: #091f3d;
      font-size: 15px;
      font-weight: 600;
    }

    .c-body {
      margin-top: 16px;

      .label {
        color: #acb4bf;
      }

      .value {
        color: #091f3d;
      }
    }
  }
</style>
